<template>
  <div class="page-main">
    <Layout class="container">
      <SideMenu ref="side"/>
      <Layout style="overflow: hidden">
        <HeaderBar @toggleCollapse="toggleCollapse">
          <FullScreen style="width: 80px"/>
          <User/>
        </HeaderBar>
        <div class="tags-nav-wrapper">
          <tags-nav></tags-nav>
        </div>
        <Content class="content-class" ref="indexcontent">
          <!--<keep-alive v-if="state.routerActive">-->
          <router-view v-if="state.isRouterAlive" v-slot="{Component,route}">
            <keep-alive :max="20" :include="includeLists">
              <component :is="Component" :key="route.fullPath"/>
            </keep-alive>
          </router-view>
          <!--</keep-alive>-->
          <BackTop
              :height="100"
              :bottom="40"
              style="background-color:rgba(0,0,0,0.6)"
              @click="back(30)">
            <Icon type="ios-arrow-up" size="24"/>
          </BackTop>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script setup>
import SideMenu from '@/components/main/components/side-menu';
import HeaderBar from "@/components/main/components/header-bar";
import {computed, getCurrentInstance, onMounted, provide, reactive} from "vue";
import {commonStore, routerStore} from "@/store/store";
import FullScreen from "@/components/main/components/full-screen";
import User from "@/components/main/components/user";
import TagsNav from "@/components/main/components/tags-nav";
import {getStore, setStore} from "@/api/utils";

const state = reactive({
  isRouterAlive: true
})

const store = commonStore()
const {proxy} = getCurrentInstance();
// 调用SideMenu组件的collapseSide()方法
const toggleCollapse = () => {
  proxy.$refs.side.collapseSide()
}
// 存储tags
const saveTagsNavList = () => {
  setStore('tagsNavList', commonStore().tagsNavList);
}

// 添加页面刷新之前事件
window.addEventListener('beforeunload', saveTagsNavList);

onMounted(() => {
  let div = proxy.$refs.indexcontent.$el;
  // 监听滚动条
  div.addEventListener('scroll', handleScroll)
})

const handleScroll = (e) => {
  let div = proxy.$refs.indexcontent.$el;
  let backDiv = document.querySelector('.ivu-back-top');
  // console.log(backDiv.style)
  // 大于100显示图标
  if (div.scrollTop > 100) {
    backDiv.style.display = 'block';
  } else {
    backDiv.style.display = 'none';
  }
}

const back = (step = 40) => {
  // 参数step表示时间间隔的幅度大小,用来控制速度
  // 当返回页面顶部的时候需要清楚定时器
  let div = proxy.$refs.indexcontent.$el;
  div.scrollTop -= step;
  if (div.scrollTop > 0) {
    var time = setTimeout(() => back(step), 15);
  } else {
    clearTimeout(time);
  }
}

// 局部刷新事件
const reload = () => {
  state.isRouterAlive = false
  console.log('开始局部刷新')
  proxy.$nextTick(() => {
    state.isRouterAlive = true
  })
}

const includeLists = computed(() => {
  const routers = getStore('routes').filter(e => {
    return e.is_cache == 1
  });
  const newData = [];
  routers.forEach(e => {
    let component = e.component;
    newData.push(component.substr(component.lastIndexOf("/") + 1));
  })
  return newData;
})

console.log(includeLists.value)


// 注册reload函数给子孙组件使用
provide('reload', reload);

</script>

<style scoped lang="less">
@import "./main.less";

.top {
  padding: 10px;
  background: rgba(0, 153, 229, .7);
  color: #fff;
  text-align: center;
  border-radius: 2px;
}
</style>
